<template>
  <div class="move-seal" @mousedown="move">
    <div class="seal-body">
      <i
        :class="['el-icon-error', !isPaging ? 'right' : 'left']"
        @click="del"
      ></i>
      <img class="s-icon" ondragstart="return false;" :src="src" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      default: '../../../../assets/iwmp/img/testsign.png'
    },
    x: {
      type: Number,
      default: 0
    },
    y: {
      type: Number,
      default: 0
    },
    isPaging: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      positionX: this.x,
      positionY: this.y
    }
  },
  watch: {
    x() {
      this.positionX = this.x
    },
    y() {
      this.positionY = this.y
    }
  },
  methods: {
    del() {
      this.$emit('del')
    },
    move(e) {
      // 算出鼠标相对元素的位置
      let disX = e.clientX - this.$el.offsetLeft
      let disY = e.clientY - this.$el.offsetTop
      document.onmousemove = e => {
        console.log('111111')

        // 鼠标按下并移动的事件
        // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let top = e.clientY - disY
        if (top < 0) {
          top = 0
        }
        if (top > 1123 - 160) {
          top = 1123 - 160
        }

        this.positionY = top
        this.$el.style.top = top + 'px'
        this.$emit('update:y', top)

        if (this.isPaging) {
          return
        }
        let left = e.clientX - disX
        if (left < 0) {
          left = 0
        }
        if (left > 794 - 160) {
          left = 794 - 160
        }
        // 绑定元素位置到positionX和positionY上面
        this.positionX = left
        // 移动当前元素
        this.$el.style.left = left + 'px'
        this.$emit('update:x', left)
      }
      document.onmouseup = () => {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  },
  mounted() {
    this.$el.style.left = this.positionX + 'px'
    this.$el.style.top = this.positionY + 'px'
    document.onselectstart = function() {
      return false
    } // 解决拖动会选中文字的问题
  }
}
</script>

<style lang="scss" scoped>
.move-seal {
  position: absolute;
  cursor: move;
  border: 1px solid #108ee9;
  background: rgba(0, 160, 233, 0.1);
  .seal-body {
    padding: 0;
    position: relative;
    i {
      position: absolute;
      top: -10px;
      font-size: 26px;
      color: #999;
      width: 26px;
      height: 26px;
      background-color: #fff;
      border-radius: 13px;
      cursor: pointer;
    }
    .right {
      right: -10px;
    }
    .left {
      left: -10px;
    }
  }
}
.s-icon {
  width: 160px;
}
</style>
